<template>
  <div class="ha-img-select">
    <el-popover 
      placement="bottom-start"
      trigger="manual"
      width="150"
      v-model="show"
      >
      <div class="img-list">
        <div class="img-item" v-for="(item, index) in option" :key="index" @click="onSelect(item)">
          <el-image :src="item.src" /> 
          <span v-if="item.text" style="padding-left: 10px">{{ item.text }}</span>
        </div>
      </div>
      <span slot="reference" class="view-box" @click="show=!show">
        <el-image v-if="curVal" :src="curVal" style="height: calc(80% - 30px); height: 80%;" fit="cover"/>
        <span v-else style="height: calc(80% - 30px); height: 80%;" ></span>
        <span class="el-icon-arrow-down" style="width: 20px;height: 20px; z-index: 2; margin-left: 5px;"></span>
      </span>
    </el-popover>
  </div>
</template>
<script>
export default {
  name: 'HaImgSelect',
  props: {
    option: { type: Array, default: () => [] },
    value: { type: String, default: '' }
  },
  model: {
    prop: 'value',
    event: 'change' 
  },
  data: () => ({
    curVal: '',
    show: false,
  }),
  computed: {},
  watch: {
    value: {
      handler(val) {
        let find = this.option.find(item => item.value == val);
        this.curVal = find?.src;
      },
      immediate: true,
    }
  },
  created() {},
  mounted() {},
  methods: {
    onSelect(item) {
      this.curVal = item.src;
      this.$emit('change', item.value); 
      this.show = false;
    }
  },
}
</script>
<style lang='scss' scoped>
.ha-img-select{
  width: 100%;
  height: 100%;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 3px 5px;
  box-sizing: border-box;
  .view-box{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
  .img-item{
    display: flex;
    align-items: center;
    padding: 2px 5px;
  }
</style>